<template>
	<view class="content-class">
		<view class="jkzs-border">
			<view class="jkzs">
				<u-image width="311px" height="138px" :src="icon"></u-image>
				<u-row v-for="(i,iIndex) in infoList" :key="iIndex" justify="space-between" class="info-line">
					{{i.question}}
					<u-image style="margin-left:10px" width="20px" height="20px" src="../../static/images/measuring/arrow.png"></u-image>
				</u-row>
			</view>
		</view>
		<view class="refresh" @click="refreshQuestion">
			<u-icon name="reload" color="#fff" size="15"></u-icon>
			换一换
		</view>
		<view class="chat" v-for="(chat,chatIndex) in msgList" :key="chatIndex">
			<!-- 时间显示 -->
			<view class="time-display">{{formatTime(new Date(chat.time),'{m}-{d} {h}:{i}')}}</view>
			<!-- 聊天区域 -->
			<view class="chat-content">
				<!-- 用户消息 -->
				<view class="message-right">
					<u-image width="30px" height="30px" src="https://ai-public.mastergo.com/ai/img_res/22a95404e026cb8fa56c6d04106c680e.jpg"></u-image>
					<view class="message-content">
						<text> {{chat.question}}</text>
					</view>
				</view>
				<!-- 医生回复 -->
				<view class="message-left">
					<u-image width="30px" height="30px" :src="doctorImg"></u-image>
					<u-loading-icon v-if="chat.isLoading" size="15" text="加载中..." textSize="14"></u-loading-icon>
					<view class="message-content" v-else>
						<text>{{ chat.answer}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-select" :style="{bottom:`${safeAreaBottom + 48}px`}">
			<u-image style="margin-right:10px" width="42px" height="48px" :src="doctorImg"></u-image>
			<view class="select-right">
				<view class="questions" v-for="(i,iIndex) in bottomList" :key="iIndex " @click="setMsgList(i)">
					{{i.question}}
				</view>
			</view>
		</view>
		<tab-bar :tabIndex="2"></tab-bar>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex"
	import data from './data.json'; // 引入JSON文件
	import {
		formatTime
	} from "@/utils/index.js"
	export default {
		data() {
			return {
				doctorImg: require('../../static/images/my/report.png'),
				icon: require('../../static/images/ai/ai.jpg'),
				questionList: data.questions,
				infoList: [],
				bottomList: [],
				msgList: [{
					time: '2025-03-19T12:00:00',
					question: "失眠多梦问题？",
					answer: "失眠多梦多与心肾不交有关，建议服用安神助眠的中药，如酸枣仁、柏子仁，保持心情平和。",
					isLoading: false
				}],
			}
		},
		computed: {
			...mapGetters(["safeAreaBottom"]),
		},
		onReady() {
			uni.hideTabBar()
		},
		onLoad() {
			this.refreshQuestion()
		},
		methods: {
			// 在某个事件中触发滚动到底部
			toReachBottom() {
				uni.createSelectorQuery()
					.selectViewport()
					.scrollOffset((res) => {
						uni.pageScrollTo({
							scrollTop: res.scrollHeight,
							duration: 300
						});
					})
					.exec();
			},
			formatTime,
			setMsgList(item) {
				item.time = new Date()
				item.isLoading = true
				this.msgList.push(item)
				setTimeout(() => {
					item.isLoading = false
					this.$forceUpdate()
				}, 1000)
				this.$nextTick(() => {
					this.toReachBottom()
				})
			},
			refreshQuestion() {
				this.infoList = this.getRandomItems(this.questionList, 3);
				this.bottomList = this.getRandomItems(this.questionList, 10);
			},
			getRandomItems(arr, count) {
				const result = new Set();
				while (result.size < count) {
					const randomIndex = Math.floor(Math.random() * arr.length);
					result.add(arr[randomIndex]);
				}
				return Array.from(result);
			}
		}
	}
</script>
<style>
	page {
		display: flex;
		flex-direction: column;
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	.content-class {
		padding: 15px 15px 150px 15px;
		flex: 1;
		display: flex;
		flex-direction: column;

		.chat {
			.time-display {
				text-align: center;
				color: #999999;
				font-size: 12px;
				margin: 32rpx 0;
			}

			.chat-content {
				display: flex;
				flex-direction: column;
				gap: 32rpx;

				.message-content {
					background-color: #1b1b1b;
					padding: 24rpx;
					border-radius: 16rpx;
					max-width: 70%;

					text {
						color: #ffffff;
						font-size: 14px;
						line-height: 1.5;
					}
				}

				.message-right,
				.message-left {
					display: flex;
					align-items: flex-start;
					gap: 16rpx;
				}

				.message-right {
					flex-direction: row-reverse;
				}
			}
		}

		.jkzs {
			padding-bottom: 0px;
		}

		.info-line {
			padding: 10px 3px;
			border-bottom: 1px solid #333333;
		}

		.bottom-select {
			display: flex;
			flex-direction: row;
			width: 100%;
			height: 48px;
			position: fixed;
			background-color: #0B0F12;
			padding-bottom: 15px;

			.select-right {
				flex: 1;
				overflow-x: auto;
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				align-items: center;
				padding-right: 30px;
			}

			.questions {
				background: #1B1B1B;
				border-radius: 8px;
				height: 17px;
				padding: 6px;
				font-size: 12px;
				display: flex;
				align-items: center;
				justify-content: center;
				white-space: nowrap;
				margin: 0px 5px;
			}
		}

		.refresh {
			height: 30px;
			background: #1B1B1B;
			border-radius: 8px;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			font-size: 12px;
			width: 74px;

			.u-icon {
				margin-right: 3px;
			}
		}
	}
</style>